<template>
	<view class="container">
		<editor
			id="editor"
			class="ql-container"
			placeholder="现在的想法是..."
			:show-img-size="true"
			:show-img-toolbar="true"
			:show-img-resize="true"
			@ready="onEditorReady"
			@statuschange="onStatusChange"
			@focus="editFocus" 
			@blur="editBlur"
			@tap="editorTap"
			ref="editot"
		></editor>
		<view class="tool-view"> 
			<view class="tool">
				<i class="iconfont icon icon-hashjinghao" @click="addTag" />
				<i class="iconfont icon icon-images" @click="insertImage" />
				<i :class="['iconfont icon icon-bold', formats.bold?'i-active':'']" data-name="bold" @tap="formatTap" />
				<i :class="['iconfont icon icon-list', formats.list=='bullet'?'i-active':'']" data-name="list" data-value="bullet" @tap="formatTap" />
				<i class="iconfont icon icon-revocation" @tap="undo" />
				<view style="position: absolute;right: 32rpx;background-color: #ae80ff;border-radius: 10rpx;">
					<i class="iconfont icon icon-fasong1" style="color: #FFFFFF" @click="showSetting" />
				</view>
			</view>

			<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
			<view class="setting-layer" v-if="showSettingLayer">
				<view class="single" @click="release(true)">
					<view>公开发布</view>
				</view>
				<view class="single" @click="release(false)">
					<view>私密保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const { html2nodes } = require('./html2nodes.js')
export default {
	name: "c-memo-edit",
	props: {
		// 点击图片时显示图片大小控件
		showImgSize: {
			type: Boolean,
			default: false
		},
		// 点击图片时显示工具栏控件
		showImgToolbar: {
			type: Boolean,
			default: false
		},
		// 点击图片时显示修改尺寸控件
		showImgResize: {
			type: Boolean,
			default: false
		},
		// 图片上传的地址
		uploadFileUrl: {
			type: String,
			default: '#'
		},
		// 上传文件时的name
		fileKeyName: {
			type: String,
			default: 'file'
		},
		// 上传图片时，http请求的header
		header: {
			type: Object
		},
		// 初始化html
		html: {
			type: String
		}
	},
	data() {
		return {
			formats: {},
			showSettingLayer: false
		}
	},
	created() {

	},
	methods: {
		editorTap(e) {
		},
		onEditorReady(e) {			
			uni.createSelectorQuery()
				.in(this)
				.select('.ql-container')
				.fields({
					size: true,
					context: true
				},res => {
					this.editorCtx = res.context;
					this.editorCtx.setContents({
						html: this.html
					})
				})
				.exec();
	
		},
		formatTap(e) {
		    let { name, value } = e.target.dataset
		    if (!name) return
		    this.editorCtx.format(name, value)
		},
		undo() {
			this.editorCtx.undo();
		},
		addTag() {
			this.editorCtx.setContents({
				html: `<span style="font-family:crism;">#简介 </span>`
			})
		},
		insertImage() {
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: async(res) => {
					var tempFilePaths = res.tempFilePaths;
					uni.showLoading({
						title: '正在上传中...'
					})
					for (let temp of tempFilePaths) {
						// 图片上传服务器
						await uni.uploadFile({
							url: this.uploadFileUrl,
							filePath: temp,
							name: this.fileKeyName,
							header: this.header,
							success: res => {
								// 上传完成后处理
								this.editorCtx.insertImage({
									src: temp, // 此处需要将图片地址切换成服务器返回的真实图片地址
									alt: '图片',
									success: function(e) {}
								});
								uni.hideLoading()
							}
						});
					}
				}
			});
		},
		checkStatus(name, detail, obj) {
			if (detail.hasOwnProperty(name)) {
				this[obj] = true;
			} else {
				this[obj] = false;
			}
		},
		onStatusChange(e) {
			this.formats = e.detail
		},
		showSetting() {
			this.showSettingLayer = !this.showSettingLayer;
		},
		editFocus() {
			
		},
		editBlur() {
			
		},
		htmlToNodes(html) {
			const json = html2nodes(`<div>${html}</div>`)
			// this.strings = json.children[0].children
			console.log(json)
		},
		release(isPublic) {
			this.showSettingLayer = false;
			this.editorCtx.getContents({
				success: res => {
					Object.assign(res, {
						isPublic: isPublic
					})
					// this.$emit('editOk', res);
					// console.log(res)
					this.htmlToNodes(res.html)
				} 
			})
		},
	}
};
</script>
<style lang="scss" scoped>
.container {
	padding: 40rpx 0;
	box-sizing: border-box;
	padding-bottom: 140rpx;
}

.ql-container {
	line-height: 160%;
	font-size: 28rpx;
	width: calc(100% - 60rpx); 
	margin: 0 auto;
} 
.tool-view{
	width: 100vw;
	position: fixed;
	left: 0;
}
.tool {
	height: 100rpx;
	display: flex;
	align-items: center;
	background: #FFFFFF;
	
	i {
		width: 100rpx;
		font-size: 48rpx;
		text-align: center;
	}
}

.i-active {
  color: #9068be;
}

.setting-layer {
	position: absolute;
	bottom: 100rpx;
	background: #fff;
	width: 250rpx;
	right: 20rpx;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	border-radius: 8rpx;
}
.setting-layer .single {
	height: 80rpx;
	font-size: 32rpx;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	line-height: 80rpx;
	flex-direction: row;
	color: #666;
}
.setting-layer .single .icon {
	margin-right: 20rpx;
}
.setting-layer-mask{
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: transparent;
}
</style>
